
import {AddTodo} from "@/pages/components/AddTodo";
import {TodoList} from "@/pages/components/TodoList";

import {TodoFilters} from "@/pages/components/TodoFilters";
import {useState} from "react";
import {ToDo} from "@/TYPE/types";

export default function Home() {
    // 设置主要数据
    const [todos, setTodos] = useState<ToDo[]>([])
    // 设置状态
    const [filter, setFilter] = useState('all')
    // 添加方法
    const addTodo = (text: string) => {
        const newTodo = {
            id: Date.now(),
            text,
            completed: false
        }
        console.log("触发2",newTodo)
        setTodos([...todos, newTodo])
        console.log("触发3",todos)
    }

    // 根据id删除
    const deleteTodo = (id: number) => {
        setTodos(todos.filter(todo => todo.id != id))
    }
    //对某项单独切换状态
    const toggleTodo = (id: number) => {
        setTodos(todos.map(todo => {
            if (todo.id === id) {
                todo.completed = !todo.completed
            }
            return todo
        }))
    }
    //
    const getFilteredTodos = () => {
        switch (filter) {
            case "all":
                return todos;
            case "active":
                return todos.filter(todo => !todo.completed);
            case "completed":
                return todos.filter(todo => todo.completed)
             default:
                return todos;
                    
        }
    }
    return (
        <div>
            <h1>todolist</h1>
            <AddTodo addTodo={addTodo}></AddTodo>
            <TodoList todos={getFilteredTodos()} deleteTodo={deleteTodo} toggleTodo={toggleTodo}></TodoList>
            <TodoFilters setFilter={setFilter}></TodoFilters>
        </div>
    );
}
